<template>
    <div class="bg-repeat">
        <div class="log-head">
            <img class="fl" src="@/assets/images/head-left.png" width="85" height="50">
            <img class="fr" src="@/assets/images/head-right.png" width="80" height="55">
        </div>
        <ul class="log-form">
            <li class="mobile h33p">
                <i class="all_bg"></i>
                <input type="text" placeholder="请输入您的手机号" v-model.trim="formData.phoneNumber">
                <input type="button" value="验证码" @click="getPhoneCode($event)">
            </li>
            <li class="code h33p">
                <i class="all_bg"></i>
                <input type="text" placeholder="请输入短信验证码" v-model="formData.phoneCode">
            </li>
            <li class="tw-code h33p">
                <i class="all_bg"></i>
                <input type="text" placeholder="请输入右侧图文验证码" v-model="formData.imgcode">
                <img class="imgCode" @click="getCheckCode($event)" :src="setEtsUrl">
            </li>
        </ul>
        <div class="log-btn">
            <input type="button" value="立即登录" @click="submitLoginOrReg()">
        </div>
        <div class="log-foot">
            <img src="@/assets/images/btm-bg.png" width="100%">
        </div>
    </div>
</template>

<script>

    import util from '@/util/util';
    import { Toast} from 'mint-ui';

    export default {
        name: 'register',
        data() {
            return {
                formData:{
                    textType:'0',
                    phoneNumber:'',//手机号
                    imgcode:'',//图片验证码
                    phoneCode:''//短信验证码
                },
                checkCodeUrl:'',//图片验证码地址
                //短信发送验证码的对象
                sendCodeobj:{
                    clock:function(){},
                    nums:60,
                    btn:{}
                }
            }
        },
        methods:{
            sendCode(btn){
                this.sendCodeobj.btn = btn;
                this.sendCodeobj.btn.disabled = true;
                this.sendCodeobj.btn.style.backgroundColor = '#ccc';
                this.sendCodeobj.btn.value = this.sendCodeobj.nums + 's重发';
                this.sendCodeobj.clock = setInterval(this.goLoop, 1000); //一秒执行一次
            },
            goLoop(){
                this.sendCodeobj.nums--;
                if(this.sendCodeobj.nums>0){
                    this.sendCodeobj.btn.value = this.sendCodeobj.nums + 's重发';
                }else{
                    this.sendCodeobj.btn.style.backgroundColor = '#ef5d3d';
                    this.sendCodeobj.btn.disabled = false;
                    clearInterval(this.sendCodeobj.clock); //清除js定时器
                    this.sendCodeobj.btn.value = '验证码';
                    this.sendCodeobj.nums = 60; //重置时间
                }
            },
            validateForm(obj,key,fnType){
                if(fnType==='notNull'){
                    if(!obj[key]||obj[key]==''){
                        return false;
                    }
                }else if(fnType==='checkIsMobile'){
                    if(!obj[key]||obj[key]==''||!util.checkIsMobile(obj[key])){
                        return false;
                    }
                }
                return true;
            },
            //以上短信验证码js特效
            getPhoneCode(e){
                let params = {};
                if(!this.validateForm(this.formData,'phoneNumber','checkIsMobile')){
                    Toast({message:'手机号不合法'});
                    return;
                }

                if(!this.validateForm(this.formData,'imgcode','notNull')){
                    Toast({message:'请输入图片验证码'});
                    return;
                }
                params = this.formData;
                /*if(true){//这个就是下面的那个请求，为了方便本地测试，直接写true
                    this.sendCode(e);
                }*/

                let target = e.currentTarget;//异步传e元素，会丢失currentTarget，在异步之前先获取再传入
                util.axiosPost('/service/consume/SendSMServlet.do',params).then(resp=>{
                    if(resp.data.state==='success'){
                        console.log('正在发送短信中...');
                        this.sendCode(target);//发送短信成功则60s以内不能重复点击
                    }
                });
            },
            getCheckCode(e){
                e.currentTarget.src = this.checkCodeUrl;
            },

            //提交表单信息
            submitLoginOrReg(){
                if(!this.validateForm(this.formData,'phoneNumber','checkIsMobile')||!this.validateForm(this.formData,'imgcode','notNull')||!this.validateForm(this.formData,'phoneCode','notNull')){
                    console.log('请正确填写表单信息！');
                    Toast({message:'请正确填写表单信息'});
                    return false;
                }
                let params = this.formData;

                util.axiosPost('/service/consume/LoginServlet.do',params).then(resp=>{
                    if(resp.data.state==='success'){
                        console.log('登录成功');
                        this.$router.push('/');//跳转到主页      ****原来从哪来的页面，再跳回哪里   这个后期加上
                    }
                });
            }
        },

        mounted(){
            //后面记得加上从参数里取$route.params   从哪来过来的，这样的话登录完成以后，还是之前跳过来的页面。
        },
        computed:{
            setEtsUrl(){
                this.checkCodeUrl = this.$store.getters.getEtsUrl+'/service/consume/checkcode5.jpg';
                return this.checkCodeUrl;
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .bg-repeat {
        background-color: #d1372d;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 999;
    }
    .imgCode{
        width: 60px;
        height: 30px;
        background-color: #ef5d3d;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
        vertical-align: top;
        margin: 10px 0 0 0;
        padding: 0;
        position: absolute;
        right: 15px;
        text-align: center;
        text-indent: 0;
    }
    .h33p input[type='text']{
        width: 58% !important; height: 58% !important; padding-top: 0.5rem !important;
    }
</style>
